<template>
	<view>
		<image src="../../static/1-1-04.jpg" class="bgImg"></image>
		<form class="register-form">
			<view class="register">
				<view class="auth">
					<image class="auth-img" src="../../static/me.png" mode=""></image>
				</view>
				<view class="career-text">
					<text>CREATE ACCOUNT</text>
				</view>
				<view class="line"></view>
				<input class="uni-input in-name" placeholder="用户名" type="number" v-model="username" />
				<input class="uni-input in-name" placeholder="手机号" type="number" v-model="phonenumber" />
				<input class="uni-input in-pwd" placeholder="密码" type="password" v-model="password" />
				<input class="uni-input in-pwd" placeholder="确定密码" type="password" v-model="Rpassword" />
				<view class="bt-register" @click="register">
					<image class="go-register" src="../../static/right.png"></image>
				</view>
			</view>
			<navigator class="goaround" open-type="redirect" url="../binding/binding">已有账号？去绑定-></navigator>
		</form>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				username: '',
				phonenumber: '',
				password: '',
				Rpassword: ''
			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		methods: {
			validata() {
				if (this.username === '' || this.phonenumber === '' || this.password === '' || this.Rpassword === '') {
					this.$showMessage('请填写完整信息')
					return false
				} else if (!this.validatePhoneNumber(this.phonenumber)) {
					this.$showMessage('手机号不合法')
					return false
				} else if (this.password != this.Rpassword) {
					this.$showMessage('密码不一致')
					return false
				} else if (this.password.length < 6) {
					this.$showMessage('密码应大于6位数')
					return false
				} else {
					return true
				}
			},
			validatePhoneNumber(str) {
				const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
				return reg.test(str)
			},
			register() {
				let _self = this
				let data = {
					username: this.username,
					phonenumber: this.phonenumber,
					password: this.password,
					jscode: this.userinfo.jscode
				}
				var status = this.validata()
				if (status) {
					this.$request({
						method: 'POST',
						url: 'occupation/registerUser/',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: data,
					}).then(res => {
						// 若返回200,则注册成功，保存返回的user_id
						if (res.code === 200) {
							uni.showToast({
								title: res.message,
							})
							_self.userinfo.user_id = res.use_id
							_self.userinfo.token = res.data.token
						} else {
							this.$showMessage(res.message)
						}
					})
				}
			}
		}
	}
</script>

<style>
	.bgImg {
		position: absolute;
		z-index: 0;
		width: 100%;
		height: 100%;
		color: #FFFFFF;
	}

	.goaround {
		color: #FFFFFF;
		text-align: center;
	}

	.auth {
		width: 80px;
		height: 80px;
		margin: auto;
		background-color: #FFFFFF;
		border-radius: 50%;
	}

	.auth-img {
		width: 40px;
		height: 40px;
		margin-top: 20px;
	}

	.career-text {
		margin-top: 30PX;
		color: #FFFFFF;
	}

	.line {
		height: 2px;
		width: 80px;
		margin: auto;
		margin-top: 5px;
		border-bottom: 2px solid #FFFFFF;
	}

	.register-form {
		height: 450px;
		margin: auto;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.register {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.uni-input {
		width: 185px;
		height: 40px;
		border: 2px solid #FFFFFF;
		border-radius: 20px;
		margin: auto;
		color: #FFFFFF;
		margin-top: 20px;
	}

	.bt-register {
		margin-top: 20px;
		width: 50px;
		height: 50px;
		z-index: 1;
		margin: 20px auto;
		background-color: #FFFFFF;
		border-radius: 50%;
	}

	.go-register {
		width: 30px;
		height: 30px;
		margin-top: 10px;
	}
</style>
